<template>
  <view class="page_box" :style="{backgroundImage:'url('+boximg+')'}"
    style="background-position:top;background-repeat:no-repeat;background-size: 100% 100%;">
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <!--    <view :class="isIphoneX ? 'space_icon' : 'space_icon_1334'" @click.stop="handleEmbeddedMiniProgram()">
      <img mode="widthFix" style="width:100%;height: 107rpx;"
        src="https://100000063-1252208446.file.myqcloud.com/images/litha/space/yuyue.png">
    </view> -->
    <view style="width:100%;font-size: 0;position: relative;line-height: 0;padding: 0;margin: 0;"
      v-for="(item,index) in imgsList" :key="index">
      <img :style="item.style" :src="item.src" mode="widthFix" style="width: 750rpx;min-height: 1000rpx;">
      <!-- 饮酒提示定位 -->
      <img v-if="item.hasTips" :style="item.tipsStyle" :src="item.tipsSrc" mode="widthFix">
      <!-- 跳转按钮 -->
      <view v-if="item.hasBtn" style="font-size: 0;margin: 0;padding: 0;line-height: 0;">
        <view v-for="(btnItem, index2) in item.btnLists" :key="index2" :style="btnItem.style"
          @click.stop="handleToMiniProgram(btnItem)"></view>
      </view>
    </view>
    <register-widget ref="registerWidgetRef" location="litha-space" />
    <publicAccount></publicAccount>
  </view>
</template>

<script>
  import api from '@/api/api';
  import NavBar from '@/components/common/navbar';
  import registerWidget from "@/components/register/register-widget.vue"
  import publicAccount from './components/publicAccount';
  import {
    SYSTEM_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  export default {
    components: {
      navBar: NavBar,
      registerWidget,
      publicAccount: publicAccount,
    },
    data() {
      return {
        isShowCustomNavBar: true,
        // 组件所需的参数
        navbarData: {
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          title: 'space二级页', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: true,
          showSearchAndBack: 1,
          whiteIcon: 1,
          hideSearch: 0,
        },
        scaleFactor: 0,
        windowHeight: 0,
        windowWidth: 0,
        screentHeight: 0,
        navigationHeight: 0,
        statusBarHeight: 0,
        fixTop: 0,
        isIphoneX: false,
        imgsList: [],
        boximg: '',
        deviceHeight: 0,
        pageHeight:0,
        viewProgress: 0
      }
    },
    async onLoad(option) {
      let params = {
        path: '/pages/litha-launch/space',
        pageName: 'space首页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      }
      getApp().cl_tracker.track('mini_program_view', params)
      wx.reportEvent("mini_program_view", {
        "eventdata": JSON.stringify(params),
        "pagename": params.pageName
      })

      // 神策埋点
      this.$commonSensors.lithaTrack.crTrack("ContentPageView", {
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Space',
        "second_module_name": "RSVP",
      })

      let that = this;
      await this.$onLaunched;

      let systemInfomations = wx.getSystemInfoSync()
      // 机型适配比例系数
      that.scaleFactor = 750 / systemInfomations.windowWidth
      // 当前机型-window高度
      that.windowHeight = systemInfomations.windowHeight * that.scaleFactor //rpx
      // 当前机型-window宽度
      that.windowWidth = systemInfomations.windowWidth * that.scaleFactor //rpx
      // 屏幕的高度
      that.screentHeight = systemInfomations.screenHeight * that.scaleFactor //rpx
      // 导航栏的高度
      that.navigationHeight = 40 * that.scaleFactor //rpx
      // 状态栏高度
      that.statusBarHeight = (systemInfomations.statusBarHeight) * that.scaleFactor //rpx

      that.fixTop = that.navigationHeight + that.statusBarHeight

      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        that.isIphoneX = true;
      }

      let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
      that.merchantId = merchantInfo.cloudMerchantId;
      that.storeId = merchantInfo.cloudMerchantStoreId;
      // 获取CMSNews配置信息
      that.getCMSPageNewsInfo('lithaSpaceSecondPage', that.merchantId);

      const query = wx.createSelectorQuery()
      query.selectViewport().scrollOffset()
      query.exec(function(res){
        that.pageHeight = res[0] ? res[0]?.scrollHeight : 0
      })
      this.deviceHeight = systemInfomations.screenHeight;
    },
    onHide() {
      // 神策埋点
      this.$commonSensors.lithaTrack.cTrack("PageLeave", {
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Space',
        "second_module_name": "RSVP",
        "view_progress": this.viewProgress
      })
    },
    methods: {

      /**
       * CMS配置space二级页图片
       */
      getCMSPageNewsInfo: async function(identifier, merchantId) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let mt = '1.0';
        const json = await api.getConfigDetail({
          method: 'POST',
          query: {
            identifier: identifier,
            merchantId: merchantId || merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            mt: mt
          }
        });
        if (json.data.code === 1000 && json.data.data !== null) {
          let configData = json.data.data;
          let cmsConfigData = {};
          if (this.preview) {
            cmsConfigData = JSON.parse(configData.preview);
          } else {
            cmsConfigData = JSON.parse(configData.content);
            let contents = configData.contents;
            for (let index in contents) {
              let startTime = contents[index].startTime;
              startTime = startTime.substring(0, 19);
              startTime = startTime.replace(/-/g, '/');
              let startTimeTimestamp = new Date(startTime).getTime();
              if (startTimeTimestamp <= new Date().getTime()) {
                cmsConfigData = JSON.parse(contents[index].content);
                break;
              }
            }
          }
          let CMSItembanner = cmsConfigData,
            CMSItembannerImage = cmsConfigData[0];
          let newInfo = {}
          CMSItembannerImage[0].data.child.forEach((item, index) => {
            item.child.forEach((itm, idx) => {
              if (itm.dataType == 'img') {
                newInfo.src = (itm.dataIpx && that.isIphoneX) ? itm.dataIpx : itm.src;
                newInfo.style = itm.style;
                newInfo.hasBtn = itm.hasBtn == '1' ? true : false;
                newInfo.hasTips = itm.hasTips ? true : false;
                newInfo.dataType = itm.dataType
                // 饮酒提示定位
                if (itm.hasTips) {
                  newInfo.tipsSrc = itm.child[0].src;
                  newInfo.tipsStyle = (itm.child[0] && itm.child[0].dataIpxstyle && that.isIphoneX) ? itm
                    .child[0].dataIpxstyle : itm.child[0].style;
                }
                //  按钮区域定位
                if (itm.hasBtn) {
                  newInfo.btnLists = itm.child || [];
                }
              } else if (itm.dataType == 'boxBg') {
                that.boximg = itm.src
              }
            })
            if (newInfo && newInfo.dataType) {
              that.imgsList.push(newInfo)
            }
            newInfo = {}
          })
        }
      },
      //  跳转其他小程序
      handleToMiniProgram(link) {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'RSVP',
          "c_event_category_2": 'Space',
          "c_click_area": link.dataName,
          "c_link_pagename": link.dataName,
          "c_link_path": link.dataLink
        }
        getApp().commonClTrack('c_ebmp_draco_update_space_join_offline_activity', Params)
        wx.reportEvent("c_ebmp_draco_update_space_join_offline_activity", {
          "eventdata": JSON.stringify(Params)
        })

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("ContentPageOperation", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Space',
          "second_module_name": "RSVP",
          "operation_type": "点击",
          "button_name":"报名线下活动"
        })

        if (wx.openEmbeddedMiniProgram) {
          wx.openEmbeddedMiniProgram({
            appId: 'wxd77b68985ec0c0ef',
            path: link.dataLink,
            extraData: {},
            // envVersion: 'trial',
            success(res) {},
            fail(res) {},
            complete(res) {}
          })
        } else {
          wx.navigateToMiniProgram({
            appId: 'wxd77b68985ec0c0ef',
            path: link.dataLink,
            extraData: {},
            // envVersion: 'trial',
            success(res) {},
            fail(res) {},
            complete(res) {}
          })
        }
      },
      //  我的预约点击
      handleEmbeddedMiniProgram() {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'RSVP',
          "c_event_category_2": 'Space',
          "c_click_area": 'button/查看我的预约',
          "c_link_pagename": '我的预约',
          "c_link_path": 'pages/AlcoholCondition/myActiveList?flag21=21'
        }
        getApp().commonClTrack('c_ebmp_draco_update_space_check_my_subscribe', Params)
        wx.reportEvent("c_ebmp_draco_update_space_check_my_subscribe", {
          "eventdata": JSON.stringify(Params)
        })

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("ContentPageOperation", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Space',
          "second_module_name": "RSVP",
          "operation_type": "点击",
          "button_name":"查看我的预约"
        })


        if (wx.openEmbeddedMiniProgram) {
          wx.openEmbeddedMiniProgram({
            appId: 'wxd77b68985ec0c0ef',
            path: 'pages/AlcoholCondition/myActiveList?flag21=21',
            extraData: {},
            // envVersion: 'trial',
            success(res) {},
            fail(res) {},
            complete(res) {}
          })
        } else {
          wx.navigateToMiniProgram({
            appId: 'wxd77b68985ec0c0ef',
            path: 'pages/AlcoholCondition/myActiveList?flag21=21',
            extraData: {},
            // envVersion: 'trial',
            success(res) {},
            fail(res) {},
            complete(res) {}
          })
        }
      },

      onPageScroll(e) {
        let _num = (e.scrollTop + this.deviceHeight) / this.pageHeight;
        const _p = Number(_num.toFixed(1));
        if(_p > this.viewProgress) this.viewProgress = _p;

        let navbarHeight = getApp().globalData.navBarHeight;
        if (e.scrollTop > navbarHeight) {
          this.navbarData.whiteIcon = 0;
          this.navbarData.isTopFixed = false;
        } else {
          this.navbarData.whiteIcon = 1;
          this.navbarData.isTopFixed = true;
        }
      },

      onShareAppMessage: async function(res) {
        let that = this
        let imageUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/space/Sapce-500_400.png'
        let path = '/pages/litha-launch/space'
        let title = '麦卡伦盈钻灵感之旅，为你呈现梦幻灵动的视觉盛宴'
        this.$commonSensors.sensorsPageShare()
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
				let title = '麦卡伦盈钻灵感之旅，为你呈现梦幻灵动的视觉盛宴'
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return {
          title: title,
          query: '',
          imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/space/Sapce-500_400.png'
        };
      },
    }
  }
</script>

<style>
  * {
    padding: 0;
    margin: 0;
  }

  .page_box {
    width: 750rpx;
    height: auto;
    font-size: 0;
  }

  .space_icon {
    position: fixed;
    bottom: 320rpx;
    right: 25rpx;
    width: 107rpx;
    height: 107rpx;
    z-index: 99;
  }

  .space_icon_1334 {
    position: fixed;
    bottom: 200rpx;
    right: 25rpx;
    width: 107rpx;
    height: 107rpx;
    z-index: 99;
  }
</style>
